<template>
  <div class="wrap">
    <div v-if="!payMask">
      <div class="bgWrap">
        <div class="item2">
          <div class="leftTitle">购买日推</div>
          <div class="chooseList">
            <van-radio-group v-model="radio">
              <van-radio
                :name="0"
                checked-color="#000"
                v-if="resRentComboList.topStatus == 0"
                >首推{{ resRentComboList.topPrice }}元</van-radio
              >
              <van-radio
                :name="1"
                checked-color="#000"
                v-if="resRentComboList.nextStatus == 0"
                >次推{{ resRentComboList.nextPrice }}元</van-radio
              >
              <van-radio
                :name="2"
                checked-color="#000"
                v-if="resRentComboList.endStatus == 0"
                >末推{{ resRentComboList.endPrice }}元</van-radio
              >
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="bgWrap" style="margin-top: 10px">
        <div class="payWayItem" @click="choosePayWay = 0">
          <img src="@/assets/payWay1.png" alt="" class="payWayIcon" />
          <em class="payWayText">余额支付(可用￥{{ resRemainingSum }})</em>
          <img
            src="@/assets/circle.png"
            alt=""
            class="circle"
            v-if="choosePayWay !== 0"
          />
          <img
            src="@/assets/circle2.png"
            alt=""
            class="circle"
            v-if="choosePayWay == 0"
          />
        </div>
        <div class="payWayItem" style="border: 0px solid #111" @click="choosePayWay = 1">
          <img src="@/assets/payWay2.png" alt="" class="payWayIcon" />
          <em class="payWayText">微信支付</em>
          <img
            src="@/assets/circle.png"
            alt=""
            class="circle"
            v-if="choosePayWay !== 1"
          />
          <img
            src="@/assets/circle2.png"
            alt=""
            class="circle"
            v-if="choosePayWay == 1"
          />
        </div>
      </div>
      <div class="nextButton" @click="beforPay">确认支付</div>
    </div>
    <div v-else>
      <div class="maskWrap" v-if="payMask">
        <div class="maskBg" @click="payMask = false"></div>
        <div class="chooseNumWrap">
          <div class="maskTitle">余额支付密码</div>
          <div class="explain">请输入余额支付密码,以验证身份</div>
          <div class="maskExpalin">
            <van-password-input
              :value="value"
              info="密码为 6 位数字"
              :error-info="errorInfo"
              :focused="showKeyboard"
              @focus="showKeyboard = true"
            />
            <van-number-keyboard
              v-model="value"
              :show="showKeyboard"
              @blur="showKeyboard = false"
            />
          </div>
          <div class="maskBack" @click="payMask = false">返回</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RadioGroup, Radio, PasswordInput, NumberKeyboard } from "vant";
import {
  apiGetVipRecInfo,
  apiCreateRecPreOrder,
  apiPayRecOrderPay,
  apiAppUserInfo,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      radio: -1,
      resRentComboList: [], //租期套餐列表
      resOrderNum: "", //订单号
      resPayInfo: "", //支付需要的信息
      choosePayWay: -1, //选择的支付方式，0-余额，1-微信
      resRemainingSum: "", //余额
      payMask: false, //余额支付输入密码mask
      value: "", //支付密码
      errorInfo: "",
      showKeyboard: true,
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getRentComboList();
    this.getUserInfo();
  },
  watch: {
    value(value) {
      console.log("vall", value);
      if (this.value.length == 6) {
        console.log("输入完成");
        this.surePay();
      }
    },
  },
  methods: {
    //查询用户信息-获取余额
    getUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.resRemainingSum = res.data.balancePrice;
        console.log("resRemainingSum余额:", this.resRemainingSum);
      });
    },
    //查询首次末推套餐列表
    getRentComboList() {
      apiGetVipRecInfo({}).then((res) => {
        this.resRentComboList = res.data;
        console.log("套餐列表:", this.resRentComboList);
      });
    },
    //发起支付之前的校验
    beforPay() {
      var myChoosePrice =
        this.radio == 0
          ? this.resRentComboList.topPrice
          : this.radio == 1
          ? this.resRentComboList.nextPrice
          : this.radio == 2
          ? this.resRentComboList.endPrice
          : "";
      if (this.radio == -1) {
        this.$toast.fail("请先选择套餐");
        return;
      } else if (this.choosePayWay == -1) {
        this.$toast.fail("请先选择支付方式");
        return;
      } else if (this.choosePayWay == 0 && myChoosePrice > this.resRemainingSum) {
        //使用余额支付 余额账户的钱不够支付选择的套餐费用
        this.$toast.fail("余额不足");
        return;
      } else if (this.choosePayWay == 0) {
        this.payMask = true; //余额支付 打开余额密码输入框、监听输入密码6位自动调起支付函数
      } else if (this.choosePayWay == 1) {
        this.surePay(); //微信支付 直接调起支付函数
      }
    },
    //确认支付：
    surePay() {
      var payPrice =
        this.radio == 0
          ? this.resRentComboList.topPrice
          : this.radio == 1
          ? this.resRentComboList.nextPrice
          : this.radio == 2
          ? this.resRentComboList.endPrice
          : "";
      //获取订单编号 再发起支付
      apiCreateRecPreOrder({
        payPrice: payPrice,
        recType: this.radio,
      }).then((res) => {
        this.resOrderNum = res.data;
        this.getUserEnterOrderPay();
        console.log("提交日推获取订单号:", this.resOrderNum);
      });
    },
    //根据订单id获取微信支付需要的信息
    getUserEnterOrderPay() {
      apiPayRecOrderPay({
        orderNum: this.resOrderNum,
        payPassword: this.choosePayWay == 0 ? this.value : "", //余额支付发支付密码，微信支付不需要
        payType: this.choosePayWay,
      }).then((res) => {
        if (res.code == 200 && this.choosePayWay == 0) {
          //余额支付成功
          this.$router.push({
            path: "/pages/payResult",
            query: {
              //传递参数
            },
          });
        } else if (res.code == 200 && this.choosePayWay == 1) {
          this.resPayInfo = res.data;
          console.log("微信支付相关信息", this.resPayInfo);
          this.onBridgeReady();
        }
      });
    },
    //微信支付：
    onBridgeReady() {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: that.resPayInfo.appId, //公众号ID，由商户传入
          timeStamp: that.resPayInfo.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.resPayInfo.nonceStr, //随机串
          package: that.resPayInfo.package,
          signType: that.resPayInfo.signType, //微信签名方式：
          paySign: that.resPayInfo.sign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$toast.success("支付成功");
            that.$router.push({
              path: "/pages/bMyPromotion",
              query: {
                //传递参数
              },
            });
          }
        }
      );
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 10px auto;
  background: #ffffff;
  border-radius: 20px;
}
.item {
  color: #181818;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.leftTitle {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
}
.right {
  font-weight: 300;
}
.van-radio-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.van-radio {
  width: 40%;
  margin-top: 24px;
}
.payWayItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.payWayIcon {
  width: 21px;
  height: 19px;
  float: left;
  margin-top: 15px;
}
.payWayText {
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  color: #000000;
  float: left;
}
.circle {
  display: inline-block;
  float: right;
  width: 20px;
  margin-top: 15px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 2.5%;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 15vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.explain {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
